const path = require('path');
//1.导入html-webpack-plugin这个插件，得到插件的构造函数
const HTMLPlugin = require('html-webpack-plugin');
//2.new构造函数，创建插件的实例对象
const htmlPlugin = new HTMLPlugin({
    //指定复制哪个页面
    template: './src/index.html',
    //指定复制出来的文件名和存放路径
    filename: './index.html'
});

const {CleanWebpackPlugin}=require("clean-webpack-plugin");
const cleanPlugin = new CleanWebpackPlugin();

//使用Node.js中的语法，向外导出一个webpack的配置对象
module.exports = {
    //mode用于指定构建模式（运行模式）,可选值有development和production
    mode: 'development',
    //开发调试阶段，建议把devtool值设置为eval-source-map
    devtool: 'eval-source-map',
    //发布，只显示行号不显示源码
    // devtool: 'nosources-source-map',
    //entry：'指定要处理哪个文件'
    entry: path.join(__dirname, './src/index1.js'),
    //指定生成文件要存放的位置，默认是dist
    output: {
        //输出文件存放的路径
        path: path.join(__dirname, './dist'),
        //生成的文件名
        filename: 'js/bundle.js'
    },
    //3.插件的数组，将来webpack在运行时，会加载并调用这些插件
    plugins: [htmlPlugin,cleanPlugin],
    devServer: {
        //首次打包成功后，自动打开浏览器
        open: true,
        //在http协议中，如果端口号时80，则可以被省略
        port: 80,
        //指定运行的主机地址
        host: '127.0.0.1'
    },
    module: {
        rules: [
            //定义不同模块对应的loader
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            //less的loader
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            //图片文件的loader
            //如果需要调用的loader只有一个，传递一个字符串也行，如果有多个load，必须指定数组
            {
                test: /.jpg|png|gif$/,
                use:{
                    loader: "url-loader",
                    options: {
                        limit: 22,
                        outputPath: 'images'
                    }
                }
            },
            //babel的loader
            //在配置babel-loader的时候程序员只需要把自己的代码进行转换即可；
            //一定要排除node_modules中的js文件，因为第三方包中的js兼容性，不需要程序员关心
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    }
}
